<template>
	<div>
		<el-card shadow="never">
			<div slot="header" class="clearfix">
				检索到 <code>{{ resultList.length }}</code>
				条关于 <code class="has-text-info">{{ query.keyword }}</code> 的记录
			</div>
			<div>
				<article v-for="(post, index) in resultList" :key="index" class="media">
					<!-- Media Left: Avatar -->
					<div class="media-left">
						<figure class="image is-48x48">
							<img :src="`https://cn.gravatar.com/avatar/${post.userId}?s=164&d=monsterid`"> 
						</figure>
					</div>
					<!-- Media Middle: Content -->
					<div class="media-content">
						<!-- First Level -->
						<p class="ellipsis is-ellipsis-1">
							<el-tooltip class="item" effect="dark" :content="post.title" placement="top">
								<!-- 帖子名称 -->
								<router-link :to="{ name: 'post-detail', params:{ postId: post.id } }">
									<span class="is-size-6">{{ post.title }}</span>
								</router-link>
							</el-tooltip>
						</p>
						<!-- Second Level -->
						<nav class="level has-text-grey is-mobile  is-size-7 mt-2">
							<div class="level-left">
								<div class="level-left">
									<!-- 发帖人 -->
									<router-link class="level-item" :to="{ path: `/member/${post.username}/home` }">
										{{ post.nickname }}
									</router-link>
									<!-- 发帖时间 -->
									<span class="mr-1">
										发布于: {{ dayjs(post.createdTime).format("YYYY/MM/DD") }}
									</span>
									<!-- 帖子标签 -->
									<span
										v-for="(tag, index) in post.tags"
										:key="index"
										class="tag is-hidden-mobile is-success is-light mr-1"
									>
										<router-link :to="{ name: 'tag', params: { tagName: tag.tagName } }">
											{{ "#" + tag.tagName }}
										</router-link>
									</span>
									<span class="is-hidden-mobile">浏览量: {{ post.viewNum }}</span>
								</div>
							</div>
						</nav>
					</div>
					<!-- Media Right: No cotent here -->
					<div class="media-right" />
				</article>
			</div>

			<!-- 分隔帖子列表 & 分页对象 -->
			<el-divider />

			<!--分页-->
			<pagination
				v-show="query.total > 0"
				:total="query.total"
				:page.sync="query.pageNum"
				:limit.sync="query.pageSize"
				@pagination="fetchList"
			/>
		</el-card>
	</div>
</template>

<script>
import { searchByKeyword } from '@/api/search'
import Pagination from '@/components/Pagination'

export default {
  	name: 'Search',

  	components: { Pagination },
  
 	data() {
		return {
			resultList: [],
			
			query: {
				// 注意: Query String 的取法
				keyword: this.$route.query.keyword,
				pageNum: 1,
				pageSize: 10,
				total: 0
			}
		}
  	},

	created() {
		this.fetchList()
	},

	methods: {
    	fetchList() {
			searchByKeyword(this.query).then(response => {
				const { data } = response
				this.resultList = data.records // keyword 对应的帖子列表
				this.query.total = data.total // 帖子总数
				this.query.pageSize = data.size // 分页 size
				this.query.pageNum = data.current // 分页 页数
      		})
    	}
  	}
}
</script>

<style scoped>

</style>
